<template>
<div class="page-bg an-play">
        <van-nav-bar
            class="an-nav-bg"
            title="支付方式"
            left-text=""
            right-text=""
            left-arrow
            :fixed="true"
            @click-left="clickBack"
            />

        <div class="an-play-box">
            <div>需支付金额（元）</div>
            <div class="an-money">￥{{orderInfo.total}}</div>
        </div>

        <van-radio-group v-model="radio">
            <van-cell-group title="选择支付方式">
                <van-cell title="支付宝" icon="location-o" clickable @click="radio = '1'">
                    <template #icon>
                        <van-image width="25" height="25" :src="playIco1" style="margin-right:5px;"/>
                    </template>
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
                <van-cell title="微信" clickable @click="radio = '2'">
                    <template #icon>
                        <van-image width="25" height="25" :src="playIco2" style="margin-right:5px;"/>
                    </template>
                    <template #right-icon>
                        <van-radio name="2" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>

        <div class="an-btn">
            <van-button type="warning" round block @click="clickPlay">立即支付</van-button>
        </div>

    </div>
</template>

<script>
import alipay from "../../assets/alipay.png";
import wechat from "../../assets/wechat.png";
export default {
  props:{
    prom:{ // 订单信息
      type: String,
      default:''
    }
  },
  data() {
    return{
      orderInfo:{
        orderID:'',
        total:0
      },
      radio:'1',
      playIco1: alipay,
      playIco2: wechat
    };
  },
  created() {
    let nd = JSON.parse(decodeURI(this.prom));
    this.orderInfo = nd;
    console.log(nd);
    this.orderInfo.total = this.$auth.returnFloat(nd.total);
  },
  methods:{

    // 立即支付
    clickPlay() {
      let nd ={
        id: this.orderInfo.orderID,
        state: 1100
      };
      this.$api.orderUpdate(nd).then(() => {
        this.$router.push({path:'/playSuccess'});
      });
    },

    clickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.an-play{
    padding-top: 60px;
    .an-play-box{
        padding: 40px;
        text-align: center;
        background-color: #fff;
        .an-money{
            padding: 10px;
            font-size: 28px;
            font-weight: bold;
        }
    }
    .an-btn{
        margin: 20px;
    }
}
</style>